<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>demo03</title>
    <style type="text/css">
    .grey{ width: 100px; height: 100px; border: 1px solid #DDD; }
    </style>
</head>
<body>
    <div class="grey grey1">11</div>
    <div class="grey grey2">22</div>
    <div class="grey grey3">33</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script type="text/javascript">
var obj = {
    x: 0
};
 
TweenLite.to(obj, 0.2, {
    x: 1,
    onUpdate: function() {
        console.log("[update] obj.x = ", obj.x);
    }
});
</script>
<script type="text/javascript">
TweenLite.defaultEase = Expo.easeOut;
TweenLite.to(".grey1", 2, {
    x: 200
});
</script>
<script type="text/javascript">
TweenLite.to(".grey2", 2, {
    x: 200,
    delay: 1,
    ease: Linear.easeNone
});
</script>
<script type="text/javascript">
TweenLite.to(".grey3", 2, {
  x: "+=200px"
});
</script>
</html>
